<template>
	<view>
		<view class="unio2o-banner bg-w">
			<swiper class="unio2o-banner-swiper" indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item class="unio2o-banner-item" v-for="(item, index) in banners" :key="index">
					<image :src="item.image" mode="aspectFill" @click="goToUrl(item.url)"></image>
				</swiper-item>
			</swiper>
			<view class="tag-ad">广告</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			// 支持从外部传入banner数据
			banner: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data(){
			return {
				// 默认的banner数据作为后备
				defaultBanners: [
					{
						id: 1,
						image: 'https://picsum.photos/seed/banner1/750/300.jpg',
						url: '/pages/goods/detail?id=1',
						title: '限时特惠活动'
					},
					{
						id: 2,
						image: 'https://picsum.photos/seed/banner2/750/300.jpg',
						url: '/pages/distribution/products',
						title: '热销商品推荐'
					},
					{
						id: 3,
						image: 'https://picsum.photos/seed/banner3/750/300.jpg',
						url: '/pages/tuan/today',
						title: '今日团购活动'
					}
				]
			}
		},
		computed: {
			// 计算属性：优先使用props传入的数据，如果没有则使用默认数据
			banners() {
				return this.banner && this.banner.length > 0 ? this.banner : this.defaultBanners;
			}
		},
		methods: {
			goToUrl(url) {
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			}
		}
	}
</script>

<style>
	.unio2o-banner{
		padding-top:16rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		position: relative;
	}
	.unio2o-banner .tag-ad{
		position: absolute;
		right: 40rpx;
		bottom: 10rpx;
		background:rgba(0,0,0,0.3);
		border-radius:4rpx;
		border:2rpx solid rgba(255,255,255,0.8);
		font-size: 24rpx;
		color:#FFFFFF;
		padding: 2rpx;
	}
	.unio2o-banner-swiper{
		height: 230rpx;
	}
	
	.unio2o-banner-swiper image{
		width: 100%;
		height: 230rpx;
		border-radius: 16rpx;
	}
</style>